<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>
<head>
<title>FINIAC | Finance Manager </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">



<link href="../css/styles.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
}

-->
#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

</style>
<script src="../script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
	var stock = getUrlVars()["noStock"];
	var noQty = getUrlVars()["noQty"];
	var stockAlert = getUrlVars()["stockAlert"];
	if(stock)
	{
		alert("No enough stock available. \n Only "+stock+" is available");
		return false;
	}
	if(noQty)
	{
		alert("Quantity required must be greater than zero (0)");
		
	}
	if(stockAlert)
	{
		$('#messageSpan').text("Stock level of this product is low. \n Only "+stockAlert+" is available")
		 $("#message").fadeIn("slow");
		    $("#message a.close-notify").click(function() {
		        $("#message").fadeOut("slow");
		        return true;
		    });	
	}
	return true;
});
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

</script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
$('#suggestions').hide();
} else {
$.post("autoComplete.htm", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}
function fill(productName,itemCode,price,purchaseUnit) {
$('#product').val(productName);
$('#productId').val(itemCode);
$('#price').val(price);
if(purchaseUnit == 'N')
	$('#purchaseUnit').val("Nos");
else if(purchaseUnit == 'M')
	$('#purchaseUnit').val("Meter");
else if(purchaseUnit == 'L')
		$('#purchaseUnit').val("Litre");

setTimeout("$('#suggestions').hide();", 200);
}
</script>
</head>

<body>
<div id='message' style="display: none;">
    <span id='messageSpan'>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

<form:form action="newBill.htm" name="addToBill"  >
<table width="100%" border="0">
		<tr>
			<td><span class="Bredcrumbs">Point Of Sale&gt;&gt; New Bill&gt;&gt;</span></td>
		</tr>
		<tr>
			<td>
			<table width="100%" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="9"><img src="../images/Tright_03_01.gif" width="9"
						height="29"></td>
					<td background="../images/Tcenter.gif" class="body"><strong
						class="boxheader"> Payment Entry  >> <font color="red"> Bill No  : ${billId }</font></strong></td>

					<td width="10"><img src="../images/Tright_1_01.gif" width="9"
						height="29"></td>
				</tr>
				<tr>
					<td height="452" valign="top" background="../images/Tright_03_03.gif"></td>
				  <td valign="top" class="news">
					<table width="100%" cellspacing="1" cellpadding="2">
						<tr bgcolor="#FFFFFF">
							<td height="20" colspan="4">
							<div align="right">
							  <div id="div"><FONT color="red"></FONT> <FONT color="green"> </FONT>
                                  <div align="right" class="mandatoryfield">*Mandatory fields </div>
						      </div>
							</div>
							<div id="errorMessage"><FONT color="red"></FONT>
							<FONT color="green">  </FONT></div>
							</td>
						</tr>

						<tr>
							<td valign="top" class="news">
							<table width="100%" border="0" align="center" cellpadding="0"
								cellspacing="0">
								<tr>
									<td><img src="../images/01.gif" width="5" height="5" /></td>
									<td width="914" background="../images/02.gif"></td>
									<td><img src="../images/03.gif" width="5" height="5" /></td>
								</tr>
								<tr>
									<td width="5" background="../images/left.gif"></td>
									<td valign="top">
									<table width="100%" cellspacing="1" cellpadding="2">

						<tr>

							<td width="13%" height="25" class="row-odd">
							<div align="right"><span class="Mandatory">*</span>Item name:</div>
							</td>
							<td width="33%" height="25" class="row-even"><span
								class="star">
							 <div></div> <input name="product" id="product" type="text" class="row-white" value="" size="36" autocomplete="off" maxlength="15" onkeyup="lookup(this.value);" onblur="fill();" />
							
							
						
						
							<div class="suggestionsBox" id="suggestions" style="display: none;">
							<div class="suggestionList" id="autoSuggestionsList">
							</div>
							</div>						
							</div>
							</span>
							
							</td>
							<td height="25" class="row-odd">
							<div align="right"><span class="Mandatory">*</span>Item code:</div>
							</td>
							<td height="25" class="row-even"><span class="star">
					 	<input type="text" name="productId" maxlength="15" size="16" value="" id="productId" class="row-white" readonly="readonly"/>
						</span></td>
						</tr>
						<tr>
							
							<td class="row-odd">
							<div align="right"><span class="Mandatory">*</span> Quantity:</div>
							</td>
							<td class="row-even"><span class="star"> <input type="text" name="qtySold" maxlength="50" size="16" value="" id="qtySold" class="row-white"></span>
								<input type="text" name="purchaseUnit" id="purchaseUnit"  size="6" readonly="readonly"/></span>
							</td>
							<td height="25" class="row-odd">
							<div align="right">Price:</div></td>
							<td height="25" class="row-even"><input name="price" id="price" type="text" class="row-white" value="" size="16" maxlength="15" id="total" readonly="readonly"/></td>
						</tr>

						
						<tr>
							<td height="25" colspan="4">
							
							</td>
						</tr>

							</table>
							    </td>
									<td width="5" height="29" background="../images/right.gif"></td>
								</tr>
			
								<tr>
									<td height="5"><img src="../images/04.gif" width="5" height="5" /></td>
									<td background="../images/05.gif"></td>
									<td><img src="../images/06.gif" /></td>
								</tr>
							</table>
							</td>
							<td valign="top" background="../images/Tright_3_3.gif" class="news"></td>
						</tr>


						<tr>
							<td height="25" colspan="4">
							<table width="100%" border="0" cellspacing="0" cellpadding="0">
								<tr>
									<td width="45%" height="35">
									<div align="right">
										
										
												<input type="submit" name="submit" value="Submit"  class="formbutton1"/>
										
									</div>
									</td>
									<td width="2%"></td>
									<td width="53%">
										
										
										<input type="reset" name="reset" value="Reset" onClick="formReset()" class="formbutton1"/>
										<input name="print" id="print" type="button" class="formbutton1" value="Print" onClick="window.print()" />
									&nbsp&nbsp&nbsp&nbsp	<a href="createNewBill.htm?billNo=${billId }"><input type="button" Id="createNewBill" class="formbutton2" value="New Bill"/></a>
									<a href="../sales/listPartialPay.htm?billNo=${billId }"><input type="button" Id="makePartialPayment" class="formbutton2" value="Make Partial Payment"/></a>
									</td>
								</tr>
							</table>
							</td>
						</tr>

					<tr>
						<td valign="top" class="news">
						<table width="100%" border="0" align="center" cellpadding="0"
							cellspacing="0">
							<tr>
								<td><img src="../images/01.gif" width="5" height="5" /></td>
								<td width="914" background="../images/02.gif"></td>
								<td><img src="../images/03.gif" width="5" height="5" /></td>
							</tr>
							<tr>
								<td width="5" background="../images/left.gif"></td>
								<td valign="top">
								<table width="100%" cellspacing="1" cellpadding="2">

						<tr>
							<td height="25" colspan="4">
							<table width="100%" cellspacing="1" cellpadding="2">

								<tr>

									<td width="5%" height="25" class="row-odd" align="center">
									<div align="center">Sl.No </div>
									</td>
									<td height="25" class="row-odd" align="center" style="width: 27%">Item name</td>
									<td class="row-odd" align="center" style="width: 13%">Item code</td>
									<td width="10%" class="row-odd" align="center">
									<div align="center">Quantity </div>
									</td>
									<td width="10%" class="row-odd" align="center">
									<div align="center">Unit Price</div>
									</td>

									<td width="15%" class="row-odd" align="center">
									<div align="center">Amount</div>
									</td>


									<td width="5%" class="row-odd" align="center">
									<div align="center">Delete</div>
									</td>
									
									
								</tr>	
					
								<c:forEach items="${items}" var="sales" varStatus="status">
								<tr id="record" class="<c:if test="${status.count % 2 == 0}">row-white</c:if><c:if test="${status.count % 2 == 1}">row-even</c:if>">
									
									<td  align="center" height="25">${status.count }</td>
									<td  align="center" style="width: 27%">${sales.productId.product}</td>
								
									<td  align="center" style="width: 10%">${sales.productId.id }</td>
									<td  align="center"  style="width: 10%">${sales.qtySold}</td>
									<td  align="center" style="width: 15%">${sales.productId.sellingPrice}</td>
									<c:set var="Test" value="${sales.total+Test}" scope="page"/>
									

									<td  align="center" style="width: 15%">${sales.total}</td>
									<td  align="center"  style="width: 5%"><a href="deleteSalesEntry.htm?id=${sales.id }" id="${sales.id }" class="delbutton"><img src="../images/delete_icon.gif"/></a></td>
										
								</tr>
							</c:forEach>
								
								
								<tr>
										<td class="row-odd" height="30"> </td>
										<td class="row-odd"> </td>
										<td class="row-odd"> </td>
										<td class="row-odd"> </td>
										<td class="row-odd" align="center"> <h2> TOTAL </h2></td>
										<td class="row-odd" align="center"><h2><c:out value="${Test}" />
</h2> </td>			
										<td class="row-odd"> </td>
										
										
								</tr>
							</table>
							</td>
						</tr>

						</table>
							</td>
							<td width="5" height="29" background="../images/right.gif"></td>
						</tr>

						<tr>
							<td height="5"><img src="../images/04.gif" width="5" height="5" /></td>
							<td background="../images/05.gif"></td>
							<td><img src="../images/06.gif" /></td>
						</tr>
					</table>
					</td>
					<td valign="top" background="../images/Tright_3_3.gif" class="news"></td>
				</tr>


					</table>
					</td>
					<td width="10" valign="top" background="../images/Tright_3_3.gif"
						class="news"></td>
				</tr>

				<tr>
					<td valign="top" background="../images/Tright_03_03.gif"></td>
					<td height="20" valign="top"></td>
					<td width="13" valign="top" background="../images/Tright_3_3.gif"
						class="news"></td>
				</tr>
				<tr>
					<td><img src="../images/Tright_03_05.gif" width="9" height="29" /></td>
					<td width="100%" background="../images/TcenterD.gif"></td>
					<td><img src="../images/Tright_02.gif" width="9" height="29" /></td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
	</form:form>
</body>
</html>